"use client"

import { TrendingUp } from "lucide-react"
import { LabelList, Pie, PieChart } from "recharts"

import {
   Card,
   CardContent,
   CardDescription,
   CardFooter,
   CardHeader,
   CardTitle,
} from "~/registry/default/ui/card"
import type { ChartConfig } from "~/registry/default/ui/chart"
import {
   ChartContainer,
   ChartTooltip,
   ChartTooltipContent,
} from "~/registry/default/ui/chart"

export const description = "A pie chart with a label list"

const chartData = [
   { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
   { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
   { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
   { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
   { browser: "other", visitors: 90, fill: "var(--color-other)" },
]

const chartConfig = {
   visitors: {
      label: "Visitors",
   },
   chrome: {
      label: "Chrome",
      color: "hsl(var(--chart-1))",
   },
   safari: {
      label: "Safari",
      color: "hsl(var(--chart-2))",
   },
   firefox: {
      label: "Firefox",
      color: "hsl(var(--chart-3))",
   },
   edge: {
      label: "Edge",
      color: "hsl(var(--chart-4))",
   },
   other: {
      label: "Other",
      color: "hsl(var(--chart-5))",
   },
} satisfies ChartConfig

export default function Component() {
   return (
      <Card className="flex flex-col">
         <CardHeader className="items-center pb-0">
            <CardTitle>Pie Chart - Label List</CardTitle>
            <CardDescription>January - June 2024</CardDescription>
         </CardHeader>
         <CardContent className="flex-1 pb-0">
            <ChartContainer
               config={chartConfig}
               className="mx-auto aspect-square max-h-[250px]"
            >
               <PieChart>
                  <ChartTooltip
                     content={
                        <ChartTooltipContent nameKey="visitors" hideLabel />
                     }
                  />
                  <Pie data={chartData} dataKey="visitors">
                     <LabelList
                        dataKey="browser"
                        className="fill-background"
                        stroke="none"
                        fontSize={12}
                        formatter={(value: keyof typeof chartConfig) =>
                           chartConfig[value]?.label
                        }
                     />
                  </Pie>
               </PieChart>
            </ChartContainer>
         </CardContent>
         <CardFooter className="flex-col gap-2 text-sm">
            <div className="flex items-center gap-2 font-medium leading-none">
               Trending up by 5.2% this month <TrendingUp className="size-4" />
            </div>
            <div className="text-muted-foreground leading-none">
               Showing total visitors for the last 6 months
            </div>
         </CardFooter>
      </Card>
   )
}
